<template>
    <div>
        <el-input v-model="localWidgetName" maxlength="20" show-word-limit placeholder="请输入标识字段1"></el-input>
        <div style="margin-top: 10px;">

            <el-tooltip placement="bottom">
                <div slot="content">
                    <p>保存之前，请确保代码中有对应的组件。</p>
                    <p>组件名称，大小写必须与标识字段保持一致。</p>
                    <p>例如：代码中组件名称为：userserve, 则 这里的标识字段也必须为 userserve，而不是 UserServe </p>
                    <div class="code-wrap">
                        <span class="code" style="color:blueviolet;">import</span>
                        <span class="code" style="margin-left: 10px; color:aqua;">userserve</span>
                        <span class="code" style="margin-left: 10px; color:blueviolet;">from</span>
                        <span class="code" style="margin-left: 10px; color:brown;">'./userserve'</span>
                    </div>
                    <div class="code-wrap">
                        <span class="code" style="color:blueviolet;">export</span>
                        <span class="code" style="margin-left: 10px; color:blueviolet;">default</span>
                        <span class="code" style="margin-left: 10px; color:chocolate;">&#123;</span>
                        <span class="code" style="margin-left: 10px; color:aqua;">'userserve'</span>
                        <span class="code" style="margin-left: 10px; color:chocolate;">&#125;</span>
                    </div>

                </div>
                <el-button type="danger" @click.stop="updateWidgeteName"  :disabled="this.localWidgetName === this.widgetName">
                    保存
                </el-button>
            </el-tooltip>

        </div>
    </div>
</template>

<script lang="ts">
// @ts-nocheck

import { Component, Prop, Vue } from 'vue-property-decorator'
import widgets from '@/components/decorate/widgets'
import pcWidgets from '@/components/decorate/pc-widgets'
@Component({
    components: {
    }
})

export default class AttributeUserServe extends Vue {
    @Prop({ default: 'mobile' }) client!: string

    localWidgetName: string = ''
    widgets = this.client == 'mobile' ? widgets : pcWidgets

    /** S data **/

    /** E data **/

    /** S computed **/


    get widgetName() {
        return this.$store.getters.widgetName
    }

    /** E computed **/



    mounted() {
        this.localWidgetName = this.widgetName
    }



    /** S methods **/
    async updateWidgeteName() {
        if (!this.localWidgetName) {
            return
        }
        if (this.localWidgetName === this.widgetName) {
            this.$message('组件名称没有变化')
            return
        }
        try {
            await this.$confirm('是否确认更改需要显示的组件?', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            // @ts-expect-error
            const hasComponent = !!this.widgets[this.localWidgetName]
            if (hasComponent) {
                this.setPageDataName()
                return
            }
            await this.$confirm('代码中没有对应组件，是否继续?此操作完成后，请立即在代码中添加对应组件', '警告', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            this.setPageDataName()

        } catch (error) {
            this.$message({
                type: 'info',
                message: '已取消删除'
            })
        }

    }
    setPageDataName() {
        this.$store.commit('setPageDataName', this.localWidgetName)
    }

    /** E methods **/


}
</script>

<style lang="scss" scoped></style>
